<div class="conversation-wrapper">
	<div class="conversation-content">
		<div class="conversation-inner"></div>
	</div>
	<div class="conversation-new-message">
		<form id="chatForm" action="<{:U('Index/chat')}>" method="post" class="form-horizontal form-validata">
			<div class="form-group">
				<textarea name="content" id="content" class="form-control" rows="2" placeholder="Enter your message..."></textarea>
			</div>
			<div class="clearfix">
				<button id="myBtn" type="submit" class="btn btn-success pull-right">Send message</button>
			</div>
			<input type="hidden" name="toID" value="<{$toUser['userid']}>">
			<input type="hidden" name="toName" value="<{$toUser['nickname']}>">
			<input type="hidden" name="toFace" value="<{$toUser['face']|getFace}>">
			<input type="hidden" name="fromID" value="<{$fromUser['userid']}>">
			<input type="hidden" name="fromName" value="<{$fromUser['nickname']}>">
			<input type="hidden" name="fromFace" value="<{$fromUser['face']|getFace}>">
		</form>
	</div>
</div>
<script src="<{:STATICS}>/centaurus/js/jquery.slimscroll.min.js"></script>
<script type="text/javascript">
var uid=<{$fromUser['userid']}>;
var isget=true;
$(document).ready(function() {
	$('.conversation-inner').slimScroll({
	    height: '352px',
	    start:'bottom',
	    alwaysVisible: false,
	    railVisible: true,
	    wheelStep: 5,
	    allowPageScroll: false
	});
	var btnStr = $("#myBtn").html();
	$('#chatForm').ajaxForm({
		beforeSubmit:function(){
			$("#myBtn").attr('disabled','disabled').html('<i class="fa fa-spinner fa-spin"></i> loading');
		},
		success:function(responseText, statusText){
			$("#myBtn").removeAttr('disabled').html(btnStr);
			if (statusText == 'success') {
				if(responseText.state == 'SUCCESS'){
					$("#content").val("");
				}else{
					_alert(responseText.message);
				}			
			}else{
			 	alert('Lost Service');	
			}
		}
	});
	getChatMsg();
	$('#myModal').modal('show').on('hidden.bs.modal', function (e) {
		isget=false;
		$('#myModal .modal-title').text("Notice");
		$(".modal-body").html('<div class="loading"><i class="fa fa-spinner fa-spin fa-4x"></i> loading...</div>');
	})
})
function getChatMsg(){
	$.ajax({ 
       url : '<{:U("Index/getChatMsg")}>',
       data:{"toid":<{$toUser['userid']}>,"fromid":uid}, 
       type : 'get', 
       timeout : 0, 
       success : function(txt){
			if(txt.status=="SUCCESS"){
				var html=createChatMsgHtml(txt.data,uid);
				$(".conversation-inner").append(html);
				$(".conversation-inner").scrollTop(900000);
			}
       }, 
       complete : function(){
       	   if(isget){
           	   setTimeout(function(){getChatMsg();}, 2000); 
           }
       } 
   }) 
}

</script>